<template>
  <div class="city">
    <div class="header">
      <div class="nowCity">
        <div class="left"><van-icon name="cross" @click="handleBack" /></div>
        <div class="title">当前城市 - {{ cityTitle }}</div>
      </div>
      <div class="search">
        <van-search placeholder="请输入城市名或拼音" />
      </div>
    </div>
    <div class="hotCity">
      <div>热门城市</div>
      <div class="hotCitiesBox">
        <div
          class="hotCities"
          v-for="(city, index) in hotCities"
          :key="index"
          @click="handleClick(city)"
        >
          {{ city.name }}
        </div>
      </div>
    </div>
    <div class="allCity">
      <van-index-bar v-for="(group, index) in allCities" :key="index">
        <van-index-anchor :index="index" />
        <van-cell
          v-for="(city, i) in group"
          :key="i"
          :title="city.name"
          @click="handleClick(city)"
        />
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import CityHttp from '../../models/CityHttp.js';

export default {
  data() {
    return {
      hotCities: [],
      allCities: {},
      cityTitle: '',
    };
  },
  async mounted() {
    var path = this.$route.path;
    var result = await CityHttp.getCity(path);
    this.hotCities = result.data.data.hotCities;
    this.allCities = result.data.data.cities;
  },
  methods: {
    handleBack() {
      this.$router.back('/films/in_theaters');
    },
    handleClick(city) {
      this.cityTitle = city.name;
      localStorage.setItem('city', city.name);
      this.$router.push('/films/in_theaters');
    },
  },
};
</script>

<style scoped>
.city {
  width: 900px;
}
.header {
  height: 100px;
  background-color: #fff;
  border: 1px solid #fff;
}
.nowCity {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 50px;
}
.nowCity .left {
  width: 14%;
  margin-left: 10px;
  font-size: 23px;
}
.nowCity .title {
  width: 76%;
  text-align: center;
  line-height: 50px;
  font-size: 17px;
}
.search {
  height: 50px;
}
.hotCity {
  margin-top: 15px;
}
.hotCitiesBox {
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
  margin-bottom: 15px;
}
.hotCities {
  width: 120px;
  background-color: #f4f4f4;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
}
.van-cell {
  cursor: pointer;
}
</style>
